<template>
  <div class="wechat-modal">
    <BasicModal title="更多精彩，关注微信公众号~" @register="wxModalRegister" to=".wechat-modal" class="w-[400px]">
      <n-card class="wechat-card" :bordered="false">
        <n-image src="/images/common-images/wx_official.jpg" alt="微信公众号" />
      </n-card>
      <template #action>
        <div></div>
      </template>
    </BasicModal>
  </div>
</template>

<script setup>
import { defineAsyncComponent } from 'vue'
import { useModal } from '@c/Modal/useModal'

const BasicModal = defineAsyncComponent(() => import('@c/Modal/BasicModal.vue'))
const emit = defineEmits(['register'])

const [wxModalRegister, {
  openModal: basicOpenWxModal,
}] = useModal({})

defineExpose({
  basicOpenWxModal
})
</script>

<style lang="less" scoped>
.wechat-modal {
  &:deep(.n-dialog__content) {
    margin-top: 12px;
    .wechat-card{
      .n-card__content{
        padding: 20px 0 6px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
      }
    }
  }
}
</style>